<script setup lang="ts">
//请求日期时间
import {availableTeacher, getTime, submitAppointment} from "@/http/reservation/reservation";
import {ref} from "vue";
import {useRouter} from "vue-router";
import {useCounterStore} from "@/stores/SaveUser";
import {makeAppointment} from "@/stores/reservation";
import router from "@/router";
import {showDialog} from "vant";

const pinna = makeAppointment()
let dateList = ref<any[]>([])
let timeSpanList = ref<any[]>([])
// 星期几函数
const weekDay = new Date().getDay()
const weeks = [ '星期日','星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
getTime().then(res => {
    // console.log(res)
    if (res.code == 200) {
        dateList.value = res.data.map(item => ({
            ...item,
            weekDay: weeks[new Date(item.date).getDay()]
        }))
        timeSpanList.value = res.data[0].timeSpanList


    } else if (res.code == 401) {
        router.push('/denglu')
    }
})


// 开始的可预约咨询师请求
availableTeacher({
    date: pinna.Storage.date,
    startTime: pinna.Storage.clock.startTime,
    endTime: pinna.Storage.clock.endTime
}).then(res => {
    // console.log(res)
    teacherList.value = res.data
})

// let isOptionDate = -1
// 点击选择的日期
let checkDate = function (date, index) {
    // console.log(date)
    timeSpanList.value = date.timeSpanList
//     存到pinna里
    pinna.Storage.date = date.date
    pinna.Storage.isOptionDate = index
    request()
}

// timeSpanList.value = pinna.Storage.date


// 点击获取时间
// let isOptionClock = -1
let checkClock = function (clock, index) {
    // 存到pinna里
    pinna.Storage.clock.startTime = clock.startTime
    pinna.Storage.clock.endTime = clock.endTime
    pinna.Storage.isOptionClock = index
    request()
}

//点击日期封装咨询师接口
let scheduleId = ref<any[]>([])

function request() {
    availableTeacher({
        date: `${pinna.Storage.date}`,
        startTime: `${pinna.Storage.clock.startTime}`,
        endTime: `${pinna.Storage.clock.endTime}`
    }).then(res => {
        // console.log(res)
        if (res.code == 200) {
            teacherList.value = res.data
        } else if (res.code == 401) {
            router.push('/denglu')
        }
    })
}


//所有咨询师列表
let baseUrl = 'http://192.168.5.120:8090'
// 教师列表请求
let teacherList = ref<any[]>([])

// 点击跳转到教师详情
const detailTeacherId = useRouter()

function jumpTeacherDetail(item) {
    detailTeacherId.push({
        path: '/teacherDetail',
        query: {id: item.teacherId}
    })
}

// 点击选择咨询师
// let isOptionTeacher = -1

function checkTeacher(item, index) {
    scheduleId.value = item.schedulingId
    // 存到pinna里
    pinna.Storage.teacher = scheduleId.value as string
    pinna.Storage.isOptionTeacher=index
}


// 咨询内容
// 提交预约
const studentInfo = useCounterStore()

// 预约成功和预约失败弹框
const showSuccess = ref(false);
const showFail = ref(false);


// 预约失败原因
const failReason = ref('')

// 提交预约
function submit() {
    if (isChecked) {
        submitAppointment({
            schedulingId: pinna.Storage.teacher,
            mode: "线下咨询",
            content: pinna.Storage.content,
            peopleType: 0,
            studentId: studentInfo.userInfo.id
        }).then(res => {
            console.log(res)
            if (res.code == 200) {
                //     提交后跳出弹框
                showSuccess.value = true;
                pinna.Storage = {
                    date: '2024-3-12',
                    isOptionDate: -1,
                    clock: {
                        startTime: '00:40:00',
                        endTime: '00:45:00'
                    },
                    isOptionClock: -1,
                    teacher: '',
                    isOptionTeacher: -1,
                    content: ''
                }
            } else if (res.code == 500) {
                showFail.value = true
                failReason.value = res.msg
            }
        })
        pinna.isChecked = false
    } else {
        console.log(pinna.Storage.content)
        showDialog({
            message: '请仔细阅读《预约协议》',
        }).then(() => {
            // on close
        });
    }


}

// 点击知道了进行跳转
const myReservation = useRouter()

function close() {
    ////跳转到我的预约
    myReservation.push({
        path: '/wodeyuyue',
    })

}

// 同意协议
const isChecked = pinna.isChecked


// const currentWeek=weeks[weekDay]
</script>

<template>
    <div class="dateTime">
        <!--        选择日期-->
        <div class="date">
            <div class="title">
                <van-icon name="calendar-o" size="20" style="margin-right: 3px"/>
                <span>选择日期</span>
            </div>
            <div class="week">
                <div :class="date.usable?'eachDay':'disabled'" v-for="(date,index) in dateList" :key="date.date"
                     @click="checkDate(date,index)"
                     :style="{'background': pinna.Storage.isOptionDate==index ? '#9e75f5':''}">
                    <div class="word">{{ date.weekDay }}</div>
                    <div class="num">{{ date.date.slice(8) }}</div>
                </div>
            </div>
        </div>
        <!--        选择时间-->
        <div class="time">
            <div class="title">
                <van-icon name="clock-o" size="20" style="margin-right: 3px"/>
                <span>选择时间</span>
            </div>
            <div class="clock">
                <div v-for="(clock,index) in timeSpanList" :key="clock.endTime"
                     :class="clock.usable?'eachClock':'disabled'"
                     @click="checkClock(clock,index)"
                     :style="{'background': pinna.Storage.isOptionClock==index ? '#9e75f5':''}">
                    <p>{{ clock.startTime }}——{{ clock.endTime }}</p>
                </div>
            </div>
        </div>
    </div>

    <div class="chooseCounselor">
        <div class="title">
            <van-icon name="friends-o" size="20" style="margin-right: 3px"/>
            <span>选择咨询师</span>
        </div>
        <div class="allTeacher">
            <div class="eachTeacher" v-for="(item,index) in teacherList" :key="item.id"
                 @click="checkTeacher(item,index)"
                 :style="{'border': pinna.Storage.isOptionTeacher==index ? '1px solid #9e75f5':''}">
                <div class="pic">
                    <img :src="baseUrl+item.avatar" alt="">
                </div>
                <div class="name">{{ item.teacherName }}</div>
                <button @click="jumpTeacherDetail(item)">查看</button>
            </div>
        </div>
    </div>
  <!--    咨询方式-->
    <div class="ConsultMethods">
        <div class="title">
            <van-icon name="comment-o" size="20" style="margin-right: 3px"/>
            <span>咨询方式</span>
        </div>
        <div class="allMethod">
            <div class="Offline">
                <van-icon name="chat" size="20"/>
                <p>线下咨询</p>
            </div>
            <div class="phone">
                <van-icon name="phone" size="20"/>
                <p>电话咨询</p>
            </div>
            <div class="network">
                <van-icon name="chat" size="20"/>
                <p>网络咨询</p>
            </div>
        </div>
    </div>

    <div class="ConsultContent">
        <div class="title">
            <van-icon name="notes-o" size="20" style="margin-right: 3px"/>
            <span>咨询内容</span>
        </div>
        <div>
            <van-cell-group inset style="margin-top: 2vh; border: #9e75f5">
                <van-field
                        v-model="pinna.Storage.content"
                        rows="2"
                        autosize
                        type="textarea"
                        maxlength="300"
                        placeholder="你现在最需要接收帮助的主要问题是什么"
                        show-word-limit
                />
            </van-cell-group>
        </div>

        <footer>
            <button @click="submit">预约咨询</button>
            <van-popup v-model:show="showSuccess" :style="{ padding: '48px' ,display: 'flex',justifyContent: 'center'}">
                <div class="pop">
                    <van-icon name="passed" style="font-size: 105px"/>
                    <p>预约成功</p>
                    <div>
                        <p>温馨提示</p>
                        <div>
                            请提前候场，咨询地址和联系方式请到个人中心——我的咨询中进行查看，如需取消预约请提前24小时进行操作，多次出现爽约的情况将被封禁账号
                        </div>
                    </div>
                    <div class="know" @click="close">
                        知道了
                    </div>
                </div>
            </van-popup>
            <van-popup v-model:show="showFail" :style="{height:'46vh', padding: '48px' ,display: 'flex',justifyContent: 'center'}">
                <div class="pop" style="height: 35vh;width: 100%">
                    <van-icon name="close" style="font-size: 105px"/>
                    <p>预约失败</p>
                    <div>
                        <p>温馨提示</p>
                        <div>
                            {{ failReason }}
                        </div>
                    </div>
                    <div class="know" @click="close">
                        知道了
                    </div>
                </div>
            </van-popup>
            <div><input type="checkbox" name="" id="" :checked="isChecked"><span style="color: #38A0FB"><router-link
                    to="/agree">《预约协议》</router-link></span>，勾选代表已同意
            </div>
        </footer>
    </div>
</template>

<style scoped lang="less">
//弹框
.pop {
  text-align: center;
  width: 70%;
  height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;

  .know {
    border: 1px solid darkgray;
    text-align: center;
    padding: 3px 10%;
  }
}

.dateTime {
  width: 90%;
  margin: 5vh auto;

  .week {
    margin: 3vh auto;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    text-align: center;

    .eachDay {
      background-color: white;
      width: 13%;
      height: 7vh;
      box-sizing: border-box;
      padding: 3px;
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .word {
        font-size: 12px;
      }
    }

    .eachDay:visited {
      background-color: #CEAFF8;
    }

    .disabled {
      background-color: #C4C4C4;
      width: 13%;
      height: 7vh;
      box-sizing: border-box;
      padding: 3px;
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .word {
        font-size: 12px;
      }
    }

    .dateChecked {
      background-color: #CEAFF8;
      color: white;
      width: 14%;
      height: 7vh;
      box-sizing: border-box;
      padding: 3px;
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .word {
        font-size: 12px;
      }
    }
  }

  //选择时间
  .clock {

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;

    .eachClock {
      text-align: center;
      margin-top: 2vh;
      background-color: white;
      width: 48%;
      border-radius: 5px;
    }

    .eachClock:visited {
      background-color: #CEAFF8;
    }

    .disabled {
      text-align: center;
      margin-top: 2vh;
      background-color: #C4C4C4;
      width: 48%;
      border-radius: 5px;
    }

    .clockChecked {
      border-radius: 5px;
      text-align: center;
      margin-top: 2vh;
      background-color: #CEAFF8;
      color: white;
    }
  }
}

.chooseCounselor {
  width: 90%;
  margin: 0 auto;

  .allTeacher {
    width: 100%;
    white-space: nowrap;
    overflow: auto;
    display: flex;
    justify-content: space-between;
    margin: 2vh 10px;

    .eachTeacher {
      border-radius: 10px;
      margin-right: 15px;
      height: 25vh;
      padding: 20px;
      width: 38%;
      background-color: white;
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      flex-wrap: wrap;
      justify-content: space-evenly;
      text-align: center;

      .pic {
        height: 7vh;
        width: 50%;
        margin: 0 auto;

        img {
          border-radius: 50%;
          width: 100%;
          height: 100%;
        }
      }

      button {
        width: 65%;
        margin: 0 auto;
        border: none;
        height: 4vh;
        border-radius: 2vh;
        color: #7246c5;
        background-color: #ECE2F8;
      }
    }
  }
}

.ConsultMethods {
  width: 90%;
  margin: 5vh auto;

  .allMethod {
    margin-top: 3vh;
    display: flex;
    justify-content: space-between;

    p {
      margin: 0
    }

    .Offline {
      border: 1px solid #7246c5;
      color: #7246c5;
      text-align: center;
      background-color: white;
      border-radius: 20px;
      height: 13vh;
      width: 30%;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
    }

    .phone, .network {
      text-align: center;
      background-color: #C4C4C4;
      border-radius: 20px;
      height: 13vh;
      width: 30%;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
    }
  }
}

.ConsultContent {
  width: 90%;
  margin: 0 auto 3vh;

  footer {
    text-align: center;
    width: 100%;
    margin: 2vh auto;

    button {
      padding: 8px;
      background-color: #9e75f5;
      color: white;
      border: none;
      width: 80%;
      border-radius: 5px;
      margin-bottom: 2vh;
    }
  }
}
</style>